<template>
  <div class="accordion">
    <div class="heading">
      <h4>information</h4>
    </div>
    <div v-for="theme in themes" :key="theme.name" class="accordion-item">
      <button class="accordion-button">{{theme.name}}</button>
      <ul class="panel">
        <li v-for="item in theme.content" :key="item.id">{{item.name}}</li>
      </ul>

    </div>
  </div>
</template>

<script>
import "@/assets/icons/arrow.svg";

export default {
  name: "Accordion",
  // props: {
  //   themes
  // },
  data() {
    return {
      themes: 
        [
          {
            name: 'People',
            content: [
              {
                name: '1231112312',
                id: 0
              },
              {
                name: '2312312312',
                id: 1
              }
            ]
          },
          {
            name: 'Affiliaction',
            content: [
              {
                name: '2312312',
                id: 0
              },
              {
                name: '123123123',
                id: 1
              }
            ]
          },
          {
            name: 'Direction',
            content: [
              {
                name: '2312312',
                id: 0
              },
              {
                name: '3123123',
                id: 1
              }
            ]
          }
        ]
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {
    var acc = document.getElementsByClassName("accordion-button");
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      }
    }
  },
  watch: {

  },
  methods: {

  },
  components: {

  },
};
</script>

<style scoped lang="scss">
  .accordion {
    font-family: Merriweather Sans, sans-serif;
    .heading {
      background-color: #f0f0f0;
      padding: 14px 0;
      h4 {
        border-left: 8px solid;
        padding-left: 8px;
        font-style: italic;
      }
    }


    .accordion-item {

      button {
        background-color: #fafafa;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        font-weight: 600;
        transition: 0.4s;
        border-bottom: 1px solid #ddd;

        &.active, &:hover {
          background-color: rgb(230, 230, 230);
        }

        &.active::after {
          content: "↑"
        }

        &:hover::after {
          opacity: .5;
        }

        &::after {
          float: right;
          content: "↓";
          right: 10px;
          transition: opacity ease-in-out .25s;
        }
      }

      .panel {
        padding: 0 18px;
        background-color: white;
        list-style-type:none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;

        li {
          box-sizing: border-box;
          margin: 0 -18px;
          background-color: #fff;
          padding: 13px 15px;
          border: 1px solid rgba(0,0,0,.07);
          border-top-color: rgba(0,0,0,.12);
          // border-bottom: none;
        }
      }


    }
  }
  


</style>
